<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
</head>

<body>
    <main>
        <!-- 轮播图 -->
        <div class="swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide swiper1"></div>
                <div class="swiper-slide swiper2"></div>
                <div class="swiper-slide swiper3"></div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
        </div>

        <!-- 第一个div -->
        <div class="box1">
            <!-- 今日排名 -->
            <div>
                <p>今日排名</p>
                <p id="ranking"></p>
            </div>
            <!-- 累积打卡 -->
            <div>
                <p>累积打卡
                    <span id="day">XX</span>天
                </p>
                <button type="button" id="clockIn">今日打卡</button>
            </div>
        </div>

        <!-- 第二个div -->
        <div class="box2">
            <div>
                <span>运动数据</span>
            </div>
            <div>
                <p>累积运动徽章</p>
                <p>
                    <span id="badges"></span>
                    <span>枚</span>
                </p>
            </div>
        </div>

        <!-- 第三个div -->
        <div class="box3">
            <div>课程训练</div>
        </div>

        <!-- 第四个div -->
        <div class="box4">
            <div>户外跑步</div>
        </div>
    </main>

    <!-- 底部导航 -->
    <nav class="tabbar"></nav>
</body>

</html>